<template>
  <div class="item">
    <dl class="item-dl">
      <dt class="item-dt">
        <a
          target="_blank"
          style="color: #036; text-decoration: none"
          @click="gotoDetail()"
        >
          {{ item.title }}
        </a>
      </dt>
      <dd class="item-dd">
        <p v-html="item.summary"></p>
      </dd>
      <a @click="gotoDetail()" target="_blank" class="item-a">
        <img class="item-img" :src="item.cover" />
      </a>
    </dl>
    <div class="meta-data">
      <label class="meta-label">{{ item.category }}</label>
      <ul class="status">
        <li style="display: inline-block; padding: 0 0 0 10px">
          发布于{{ item.publish_date }} | {{ item.read_count }}次阅读 |
          {{ item.comment_count }}个意见
        </li>
        <li class="b">
          <a
            @click="gotoDetail()"
            target="_blank"
            style="color: #666; text-decoration: none"
            >详细内容</a
          >
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ArticleItem',
  props:{
    article :{}
  },
  data(){
    return {
      item:{
        id : 1,
        title:'《雷神4》反派屠神者造型曝光 贝尔全身涂成灰色',
        summary: `受疫情影响停拍的《雷神4》近日宣布在马里布重新拍摄。有外媒曝光了新片场照。<strong>克里斯蒂安·贝尔饰演的反派角色屠神者格尔造型曝光，让人眼前一亮。</strong>克里斯蒂安·贝尔是第一次参与漫威系列电影的创作，这次他饰演的反派角色很有挑战性，具体剧情暂不清楚。`,
        cover: 'https://file-1252776546.cos.ap-hongkong.myqcloud.com/279a53b8b328fb9bbb896408629fa159.jpg',
        category: '影视',
        publish_date: '2021-08-05 10:46',
        read_count :142,
        comment_count:0,
      }
    }
  },
  methods:{
    gotoDetail(){
      this.$router.push(`article/${this.item.id}`)
    }
  }
}
</script>

<style scoped>
.item {
  border-bottom: 2px solid #f3f3f3;
  position: relative;
  padding-top: 4px;
}
.meta-data {
  height: 30px;
  padding: 0;
  position: relative;
  line-height: 16px !important;
}
.meta-label {
  color: #ccc;
  position: relative;
  left: 150px;
  top: 3px;
  font-size: 14px;
  padding: 0 0 0 8px;
}
.meta-label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  height: 13px;
  border-left: 2px solid #4950a3;
}
.status {
  right: 30px;
  text-align: right;
  color: #7b91a4;
  position: absolute;
  top: 3px;
  list-style: none;
  font-size: 14px;
}
.b {
  display: inline-block;
  padding: 0 0 0 10px;
  font-weight: 700;
  font-size: 14px;
}
.item-dl {
  padding: 20px 30px 10px 150px;
  min-height: 150px;
  position: relative;
  background: url(https://www.cnbeta.com/images/common/waterCover.png) no-repeat
    530px top;
}
.item-dt {
  font-size: 16px;
  padding: 0 0 10px;
  font-weight: 700;
  color: #036;
  position: absolute;
}
.item-dd {
  font-size: 13px;
  line-height: 22px;
  color: #666;
  overflow: hidden;
  min-height: 70px;
  max-height: 180px;
  margin-top: 30px;
  margin-left: 0px;
  margin-bottom: -10px;
}
.item-dd > p {
  word-wrap: break-word;
  word-break: break-all;
}
.item-a {
  color: #666;
  text-decoration: none;
}
.item-img {
  display: block;
  width: 110px;
  height: 110px;
  border-radius: 110px;
  border: 5px solid #eee;
  position: absolute;
  left: 20px;
  top: 20px;
}
</style>
